<template>
  <view class="ver-layout">
    <!--  标题返回栏  -->
    <view class="back-title-layout hor-layout-center" :style="{opacity: titleOpacity}">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <view class="title-text">员工信息</view>
      <view v-if="!staffObj.from" class="edit-view" @click="toEditStaff">
        <i class="iconfont edit-icon">&#xe645;</i>
      </view>
    </view>
    <!-- 上面的布局  -->
    <view class="top-layout ver-layout" :style="getTopStyle">
      <view class="title-layout hor-layout-center">
        <view class="back-view" @click="navBack">
          <i class="iconfont back-icon">&#xe8de;</i>
        </view>
        <view class="title-text">员工信息</view>
        <view v-if="!staffObj.from" class="edit-view" @click="toEditStaff">
          <i class="iconfont edit-icon">&#xe645;</i>
        </view>
      </view>
      <view class="top-layout-info hor-layout-center">
        <image class="student-icon" :src="staffObj.avatar?staffObj.avatar:ic_teacher_student_default1"/>
        <view class="ver-layout student-info">
          <view class="student-name">{{ staffObj.name ? staffObj.name : '姓名：' }}</view>
          <view class="student-number">联系电话：{{ staffObj.phone }}</view>
          <view class="student-class">所在岗位：{{ getStaffJobs }}</view>
        </view>
        <view v-if="staffObj.class_title" class="major-name">{{ staffObj.class_title }}</view>
      </view>
    </view>
    <!--  下面的布局  -->
    <view class="content-layout">
      <view v-for="(item,index) in studentInfos" :key="index" class="student-info-item hor-layout-side-center">
        <view class="student-info-key single-line">{{ item.label }}</view>
        <view class="student-info-value single-line">{{ item.value }}</view>
      </view>
      <view class="student-info-item hor-layout-side-center">
        <view>状 态</view>
        <u-switch v-model="statusChecked" :disabled="!canUpdateStaff" active-color="#42B4AB" size="35"
                  @change="changeTeacherStatus"></u-switch>
      </view>
    </view>
  </view>
</template>

<script>
import {addStaff, staffList} from "@/router.js"
import {StaffListApi} from "@/api/staffList.js"

let ic_user_top_bg = require("@/static/home/ic_user_top_bg.png")
let ic_teacher_student_default1 = require("@/static/home/ic_student_default1.png")
let engine = new StaffListApi()
export default {
  name: "staffDetail",
  data() {
    return {
      ic_teacher_student_default1,
      titleOpacity: 0,
      staffObj: {},
      staffInfo: {},
      eduList: [],
      statusChecked: false,
      studentInfoMap: {
        name: '姓 名',
        sexValue: '性 别',
        age: '年 龄',
        job: '岗 位',
        degree: '学 历',
        username: '联系电话',
        id_card: '身份证号',
        entry_time: '入职时间',
        address: '家庭住址',
      }
    }
  },
  computed: {
    getTopStyle() {
      return {backgroundImage: `url(${ic_user_top_bg})`}
    },
    getStaffJobs() {
      return this.staffInfo.jobs && this.staffInfo.jobs.map(j => j.name).join("，")
    },
    studentInfos() {
      let studentInfoMap = this.studentInfoMap, sKeyList = Object.keys(studentInfoMap), staffInfo = this.staffInfo
      sKeyList = sKeyList.map(key => {
        return {label: studentInfoMap[key], value: staffInfo[key] ? staffInfo[key] : '--'}
      })
      return sKeyList
    },
    canUpdateStaff() {
      return this.staffObj.from ? false : true
    }
  },
  onLoad(options) {
    this.staffObj = options
    this.getEduList()
  },
  onPageScroll(e) {
    console.log("onPageScroll", e.scrollTop)
    this.titleOpacity = e.scrollTop * 0.005
  },
  methods: {
    navBack() {
      this.$u.route({type: 'back'})
    },
    changeTeacherStatus() {
      let id = this.staffObj.id, status = this.statusChecked ? 1 : 0
      engine.updateStaff({id, status}).then(res => {
        if (res.code === 200) {
          this.$u.toast("修改成功！")
          this.getStaffDetail()
          this.$u.pageCallBackDelay(staffList, 'refreshData')
        }
      })
    },
    toEditStaff() {
      this.$u.route({url: addStaff, params: {staffInfo: JSON.stringify(this.staffInfo)}})
    },
    getEduList() {
      engine.getEduList().then(res => {
        this.eduList = res.data
        this.getStaffDetail()
      })
    },
    getStaffDetail() {
      let sexMap = {1: '男', 2: '女', 0: '未知'}
      engine.getStaffDetail(this.staffObj.id).then(res => {
        this.staffInfo = res.data
        this.staffInfo.sexValue = sexMap[res.data.sex]
        this.staffInfo.job = res.data.jobs.map(j => j.name).join("，")
        this.statusChecked = res.data.status === 1//status:人事状态：0离职1在职
        this.staffInfo.degree = this.eduList.find(j => j.id === this.staffInfo.edu).name
      })
    }
  }
}
</script>

<style>
page {
  background: #EFEFEF;
}

.back-title-layout {
  z-index: 1000;
  position: fixed;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  background: #666D7A;
}

.title-layout {
  width: 100%;
  height: 44px;
}

.back-view {
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.title-text {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.edit-view {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.edit-icon {
  color: white;
  font-size: 20px;
}

.top-layout {
  position: absolute;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 140px);
  background-repeat: repeat;
  background-size: 100% 100%;
}

.top-layout-info {
  padding: 0px 12px;
  padding-top: 10px;
}

.student-icon {
  width: 48px;
  height: 48px;
  background: #F8D0D0;
  border-radius: 50%;
}

.student-info {
  flex: 1;
  margin-left: 12px;
}

.student-name {
  line-height: 14px;
  font-size: 14px;
  color: #FFFFFF;
}

.student-number {
  margin-top: 11px;
  line-height: 12px;
  font-size: 12px;
  color: #FFFFFF;
}

.student-class {
  margin-top: 9px;
  line-height: 12px;
  font-size: 12px;
  color: #FFFFFF;
}

.content-layout {
  margin-top: calc(var(--status-bar-height) + 140px);
}

.student-info-item {
  padding: 0px 12px;
  width: 100%;
  height: 41px;
  background: white;
  border-bottom: 1px solid #E4E4E4;
}

.student-info-item > * {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.student-info-key {
  width: 60px;
  flex-shrink: 0;
  text-align: justify;
  text-align-last: justify;
  display: inline-block;
}

.student-info-value {
  margin-left: 20px;
}
</style>
